<script setup lang="ts">
import { computed } from 'vue'
import { NTag } from 'naive-ui'
import type { ProjectVo } from '~/entity/project/project-vo'
import ImageProjectCoverDefault from '~/assets/project/image-project-cover-default.png?url'
import projectRequest from '~/api/project'

const props = defineProps<{
  project: ProjectVo
}>()

const emits = defineEmits<{
  handleViewHistory: [item: ProjectVo]
  handleEdit: [id: string]
  handleView: [id: string]
  handleRefresh: []
}>()

const projectId = computed<string>(() => props.project.id)
const isDisabled = computed<boolean>(() => props.project.isDisabled === 1)

/**
 * 删除项目信息
 */
function handleClickDelete() {
  projectRequest.delete(projectId.value).then(() => {
    emits('handleRefresh')
  })
}

/**
 * 打开详情信息
 */
function handleClickView() {
  emits('handleView', projectId.value)
}
</script>

<template>
  <div
    flex="~ col"
    mx-2 mb-4 mt-2 w-xs gap-2 bg-white p3 shadow-xl
    border="~ rd-2 gray-2"
    class="project-card"
  >
    <div class="h8 flex items-center gap-2">
      <span class="cursor-pointer font-size-6 font-bold" @click="handleClickView">
        {{ project.name }}
      </span>
      <div>
        <NTag v-if="isDisabled" type="warning" size="small" :bordered="false">
          禁用
        </NTag>
        <NTag v-else type="success" size="small" :bordered="false">
          启用
        </NTag>
      </div>
    </div>
    <div class="h22 flex gap-2">
      <div w-20>
        <img h-20 alt="项目封面" :src="ImageProjectCoverDefault">
      </div>
      <div class="flex flex-col gap-2 p1">
        <span class="flex items-center gap-2 overflow-hidden">
          <i class="i-carbon-time w-2em text-1em" />
          <span class="flex-1">{{ project.gmtModified || project.gmtCreate }}</span>
        </span>
        <span v-if="project.description" class="flex items-center gap-2 overflow-hidden">
          <i class="i-carbon-text-long-paragraph w-2em text-1em" />
          <span class="line-clamp-2 flex-1">{{ project.description }}</span>
        </span>
      </div>
    </div>
    <hr>
    <div class="grid grid-cols-4 h6 w-full cursor-pointer place-items-center gap-2">
      <div class="transition-400 hover:color-green-7" @click="handleClickView">
        查看
      </div>
      <div class="transition-400 hover:color-green-7" @click="emits('handleEdit', props.project.id)">
        编辑
      </div>
      <div class="transition-400 hover:color-green-7" @click="emits('handleViewHistory', props.project)">
        生成历史
      </div>
      <div class="transition-400 hover:color-red-7" @click="handleClickDelete">
        删除
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

</style>
